<template>
  <div class="my-padded-tb-large animate__animated animate__fadeInUp">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui blue header">标签</h3>
          </div>
          <div class="right aligned column">
            共 <h3 class="ui orange header my-inline-block">&nbsp;{{tagList.length}}&nbsp;</h3> 个
          </div>
        </div>
      </div>
      <!--所有标签-->
      <div class="ui attached segment my-padded-tb-large my-padded-large">
        <a v-for="tag in tagList" @click="changeTagId(tag.id)" :class="tagId === tag.id?'ui label blue basic large left pointing my-margin-tb-tiny':'ui label basic large left pointing my-margin-tb-tiny'">
          {{tag.name}}
          <div class="detail">{{tag.count}}</div>
        </a>
      </div>
      <!--博客和分页-->
      <limit-page  @getList="getTagList" :page="page"></limit-page>
    </div>
  </div>
</template>

<script>
  import LimitPage from "../components/LimitPage";
  import {getTagListByLimit} from "../api/tags";
  export default {
    name: "Tags",
    components: {LimitPage},
    data() {
      return {
        page: {},
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
        tagId: this.$route.params.tagId
      }
    },
    activated() {
      if (this.$route.params.tagId!==undefined) {
        this.tagId = this.$route.params.tagId
        this.getTagList(1)
      }
    },
    created() {
      if (this.tagId === undefined) {
        this.tagId = this.tagList[0].id
        this.getTagList(1)
      }
    },
    methods: {
      getTagList(page) {
        let data = {
          page,
          size: 6,
          tagId: this.tagId
        }
        getTagListByLimit(data).then(res => {
          if (res.code === 200) {
            this.page = res.data
            this.initBlogList()
          }
        })
      },
      initBlogList() {
        // 设置每个博客的用户信息
        this.page.list.forEach(value => {
          this.users.forEach(value1 => {
            if (value.userId === value1.id) {
              value.nickname = value1.nickname
              value.avatar = value1.avatar
            }
          })
        })
        // 设置每个博客的分类信息
        this.page.list.forEach(value => {
          this.typeList.forEach(value1 => {
            if (value.typeId === value1.id) {
              value.type = value1.name
            }
          })
        })
        // 设置每个博客的标签信息
        this.page.list.forEach(value => {
          let arr = []
          this.tagList.forEach(tagValue => {
            value.tagIds.forEach(value1 => {
              if (tagValue.id === value1) {
                arr.push(tagValue.name)
              }
            })
          })
          arr.reverse()
          value.tags = arr
        })
      },
      changeTagId(tagId) {
        if (this.tagId !== tagId) {
          this.tagId = tagId
          this.getTagList(1)
        }
      }
    }
  }
</script>

<style scoped>

</style>
